<template>
    <view>
        <!-- 这层标签没有也可以 -->
        <view class="uni-padding-wrap uni-common-mt">
            <view>
                <scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"
                             @scrolltoupper="upper"
                             @scrolltolower="lower">
                    <div class="insulate-main">
                        <h1 class="insulate-tit">居家隔离观察承诺书</h1>
                        <div>目前，苏州市已启动重大突发公共卫生事件一级响应机制，实行最严格的科学防控措施。为配合本市新型冠状病毒感染的肺炎疫情防控工作，本人郑重承诺：</div>
                        <ul>
                            <li>1、本人在居家隔离期内，不擅自外出，谢绝会客；</li>
                            <li>2、积极配合医务人员进行每日上、下午各一次体温测量并做好记录，如实回答健康询问；</li>
                            <li>3、在家出现发热、咳嗽、气促等急性呼吸道症状，立即电话联系指定工作人员，由所在区落实专用车辆送至指定发热门诊，并主动配合开展相关工作；</li>
                            <li>4、居家隔离期间，做好个人及共同生活人员的防护；</li>
                            <li>5、对有关信息不擅自传播，不瞒报、不谎报、不迟报。</li>
                        </ul>
                        <div>如本人未遵守以上承诺，本人愿承担《中华人民共和国传染病防治法》中规定的相应法律责任。</div>

                        <h1 class="insulate-tit">集中隔离观察（留验）承诺书</h1>
                        <div>目前，苏州市已启动重大突发公共卫生事件一级响应机制，实行最严格的科学防控措施。为配合本市新型冠状病毒感染的肺炎疫情防控工作，本人郑重承诺:</div>
                        <ul>
                            <li>1、严格遵守集中隔离观察（留验）相关制度，在集中隔离观察（留验）期间不擅自外出，不会见访客；</li>
                            <li>2、积极配合医务人员开展集中隔离观察（留验），进行体温测量，如实汇报健康情况；</li>
                            <li>3、集中隔离观察（留验）期间，按照要求与其他隔离观察对象保持独立空间，避免交叉感染；</li>
                            <li>4、对有关信息不擅自传播，对其他隔离观察对象不做不符合实际的评论。</li>
                        </ul>


                        <div>如本人未遵守以上承诺，本人愿承担《中华人民共和国传染病防治法》中规定的相应法律责任。</div>
                        <div class="insulate-info">
                            <div>填报人: <span id="tbr">{{name}}</span></div>
                            <div>承诺人: <span id="cnr">{{name}}</span></div>
                            <div>承诺人电话: <span id="cnrdh">{{mobile}}</span></div>
                            <div>承诺人证件号: <span id="cnrzjh">{{documentNumber}}</span></div>
                            <div>日期: <span id="cnrrq">{{date}}</span></div>
                        </div>
                    </div>
                </scroll-view>
            </view>
            <!--            <view @tap="goTop" class="uni-link uni-center uni-common-mt">-->
            <!--                点击这里返回顶部-->
            <!--            </view>-->
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollTop: 0,
                old: {
                    scrollTop: 0,
                }
            }
        },
        props: {
            name: "",
            mobile: "",
            documentNumber: "",
        },
        computed: {
            date() {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if(month<10){
                    month = "0" + month
                }
                if(day<10){
                    day = "0" + day
                }
                return `${year}-${month}-${day}`;
            }
        },
        methods: {
            scroll(e) {
                this.old.scrollTop = e.detail.scrollTop
            },
            goTop() {
                //这里必须将this.old.scrollTop值赋值给this.scrollTop
                // 其实将e.detail.scrollTop直接赋值给this.scrollTop也可以
                this.scrollTop = this.old.scrollTop;
                this.$nextTick(function () {
                    this.scrollTop = 0
                });
            },
            upper() {
                // 滚动到顶部/左边触发
            },
            lower() {
                // 滚动到底部/右边触发
            }
        }

    }
</script>

<style lang="less">
    .scroll-view {
        height: 200px;
        width: 100%;
    }

    ul, li {
        list-style: none;
    }

    .top {
        height: 200px;
        width: 100%;
        background: red;
    }

    .insulate-tit {
        width: 100%;
        font-size: 0.36rem;
        color: #333;
        padding-bottom: 0.2rem;
        padding-top: .2rem;
        font-weight: bold;
        text-indent: 0;
        text-align: center;
    }

    .center {
        height: 200px;
        width: 100%;
        background: green;
    }

    .bottom {
        height: 200px;
        width: 100%;
        background: blue;
    }
</style>